import { GetterTree, MutationTree, Module } from 'vuex'
import { $storage } from '../../utils/storage'
import { $g } from '../../utils/config'
import { mutations } from '../types'
import { SystemState, RootState } from '@/utils/interface'
const state: SystemState = {
  collapsed: null,
  selectedKeys: null,
  opens: null,
  breadcrumbs: [],
  routes: {},
  menus: [
    {
      id: '1123124',
      icon: 'PieChartOutlined',
      name: '快速上手',
      path: 'index',
      children: []
    },
    {
      id: '21235',
      icon: 'UserOutlined',
      name: '系统工具',
      children: [
        {
          id: '2vv-12431',
          name: '全局变量',
          path: 'personSearch'
        },
        {
          id: '2ss-22342',
          name: '请求响应',
          path: 'requestAndResponse'
        },
        {
          id: '2fd-3345345',
          name: '本地缓存',
          path: 'localCache'
        },
        {
          id: '2rt-4345345',
          name: '工具函数',
          path: 'toolFunction'
        }
      ]
    },
    {
      id: '3222333',
      icon: 'PieChartOutlined',
      name: '基础页面',
      children: [
        {
          id: '3e-13456',
          name: '登录页面',
          path: 'loginPage'
        },
        {
          id: '3er-212345',
          name: '注册页面',
          path: 'registerPage'
        }
      ]
    }
  ]
}

const getters: GetterTree<SystemState, RootState> = {
  // 是否收缩
  collapsed: (state): boolean | null => {
    let collapsed = state.collapsed
    if (!collapsed) collapsed = $storage.get($g.caches.storages.collapsed)
    return collapsed
  },
  // 当前被选中的菜单keys
  selectedKeys: (state): string[] | null => {
    let selectedKeys = state.selectedKeys
    if (!selectedKeys) selectedKeys = $storage.get($g.caches.storages.selectedKeys)
    return selectedKeys
  },
  // 默认展开的菜单项
  opens: (state): string[] | null => {
    let opens = state.opens
    if (!opens) opens = $storage.get($g.caches.storages.opens)
    return opens
  },
  breadcrumbs: (state) : string[] => {
    let breadcrumbs = state.breadcrumbs
    if (!breadcrumbs.length) breadcrumbs = $storage.get($g.caches.storages.breadcrumbs)
    return breadcrumbs
  },
  // 当前被加入的路由
  routes: (state): any => {
    let routes = state.routes
    if (Object.keys(routes).length <= 0) {
      routes = JSON.parse($storage.get($g.caches.storages.routes) ?? '{}')
    }
    return routes
  }
}

const mutation: MutationTree<SystemState> = {
  [mutations.system.collapsed] (state, status: boolean | null = null) {
    $storage.set($g.caches.storages.collapsed, status)
    state.collapsed = status
  },

  [mutations.system.selectedKeys] (state, selectedkey: string | string[]) {
    state.selectedKeys = Array.isArray(selectedkey) ? selectedkey : [selectedkey]
    $storage.set($g.caches.storages.selectedKeys, selectedkey)
  },

  [mutations.system.opens] (state, opens: string[]) {
    state.opens = Array.isArray(opens) ? opens : [opens]
    $storage.set($g.caches.storages.opens, opens)
  },

  [mutations.system.breadcrumbs] (state, breadcrumbs: string[]) {
    state.breadcrumbs = breadcrumbs
    $storage.set($g.caches.storages.breadcrumbs, breadcrumbs)
  },

  [mutations.system.routes] (state, routes: any) {
    state.routes = routes
    $storage.set($g.caches.storages.routes, JSON.stringify(routes))
  }
}

export const system: Module<SystemState, RootState> = {
  namespaced: true,
  state,
  getters,
  mutations: mutation
}
